<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>开店管家</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				background-color: #FFF;
				height: 100%;
				width: 100%;
			}
			.shop-logo{
				height: 3.56rem;
				width: 100%;
				font-size: 0.35rem;
				text-align: center;
			}
			
			.pay-info{
				box-sizing: border-box;
				padding: 0.3rem 0.4rem;
				font-size: 0.3rem;
			}
			.shop-name{
				width: 100%;
				overflow: hidden;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;
				box-sizing: border-box;
				padding: 0.3rem 0.2rem;
				background-color: #FFFFFF;
				border-radius: 2px;
			}
			.icon-logo{
				width: 1.72rem;
				height: 1.72rem;
				background-image: url(img/logo.png);
				background-position: center;
				background-size: 100% 1.72rem;
				background-repeat: no-repeat;
				border-radius: 50%;
			}
			.shop-name-label{
				padding: .2rem;
				box-sizing: border-box;
				flex-grow: 1;
				font-size: .35rem;
				line-height: .5rem;
				text-align: center;
			}
			.pay-amount{
				box-sizing: border-box;
				padding: 0.3rem 0.2rem;
				background-color: #FFFFFF;
				border-radius: 2px;
			}
			.pay-input{
				font-size: 0.4rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0.2rem;
				border: 1px solid #E6E6E6;
				border-radius: 4px;
			}
			
			.pay-input-label{
				display: inline-block;
				font-family:PingFangSC-Regular;
				padding-right: 0.12rem;
				padding-left: 0.12rem;
			}
			#paymoney{
				flex-grow: 1;
				height: 0.7rem;
				font-size: 0.5rem;
				line-height: .7rem;
			}
			.placeholder{
				position: relative;
			}
			.placeholder::after{
				content: '请输入金额';
				position: absolute;
				left: 0;
				color: #e0e0e0;
				z-index: 0;
				font-size: 0.35rem;
				line-height: 0.7rem;
			}
			.pay-submit-btn{
				width: 100%;
				height: 0.9rem;
				background-color: #4a90e2;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0.3rem;
				border-radius: 2px;
				margin-top: 0.77rem;
			}
		</style>
		<style type="text/css">
			/*键盘css*/
			.keys-box{
				position: absolute;
				width:100%; 
				height:45%;
				box-sizing: border-box;
				bottom:0;
				border-top: 1px solid #E6E6E6;
			}
			.keys-box .paynum {
				font-size: 0.6rem;
				color: #424857;
			}
			.keys-box .payzero {
				font-size: 0.6rem;
				color: #424857;
			}
			table{
				width:100%; 
				height: 100%;
			    background-color:white;
			    background-top:none;
			}
			table tr td{
				text-align:center;
				width: 1.88rem;
				height: 1.26rem;
				font-family: "Microsoft YaHei";
				font-weight: normal;
				border-right:1px solid #D9D9D9;
				border-bottom:1px solid #D9D9D9;
			}
			table tr td:active{
				background-color:#ECECEC;
			}
			.keybord-return{
				width: 1.88rem;
				height: 1.26rem;
				background:url(./img/keybord-return.png) no-repeat;
				background-size: 50% 50%;
				background-position: center;
			}
			.keybord-stop{
				/*background-image:url(../images/keybord-stop.png);*/ 
				background-size:90% 90%;
			}
			.pay{
				color:#ffffff;
				font-size:0.3rem;
				background-color:#4a90e2;
			}
			.pay:active{
				background-color: #D9D9D9;
			}
			.pay a{
				display: block;
				position: relative;
				width: 100%;
				height: 100%;
				color: #fff;
				text-decoration: none;
			}
			.a-pay {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
			.pay-disabled {
				background-color: #D9D9D9;
			}
			#alipayform{
				height: 0;
				overflow: hidden;
			}
			.group-img{
				height: .4rem;
				text-align: center;
				padding-top: .2rem;
			}
			/*加载动画*/
			#loading{
				position: fixed;
				display: none;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(255,255,255,0.92);
				z-index: 100;
				font-size: .4rem;
				text-align: center;
			}
			.spinner {
			  margin: 100px auto;
			  width: 50px;
			  height: 60px;
			  text-align: center;
			  font-size: 10px;
			}
			 
			.spinner > div {
			  background-color: #67CF22;
			  height: 100%;
			  width: 6px;
			  display: inline-block;
			   
			  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
			  animation: stretchdelay 1.2s infinite ease-in-out;
			}
			 
			.spinner .rect2 {
			  -webkit-animation-delay: -1.1s;
			  animation-delay: -1.1s;
			}
			 
			.spinner .rect3 {
			  -webkit-animation-delay: -1.0s;
			  animation-delay: -1.0s;
			}
			 
			.spinner .rect4 {
			  -webkit-animation-delay: -0.9s;
			  animation-delay: -0.9s;
			}
			 
			.spinner .rect5 {
			  -webkit-animation-delay: -0.8s;
			  animation-delay: -0.8s;
			}
			 
			@-webkit-keyframes stretchdelay {
			  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
			  20% { -webkit-transform: scaleY(1.0) }
			}
			 
			@keyframes stretchdelay {
			  0%, 40%, 100% {
			    transform: scaleY(0.4);
			    -webkit-transform: scaleY(0.4);
			  }  20% {
			    transform: scaleY(1.0);
			    -webkit-transform: scaleY(1.0);
			  }
			}
			
		</style>
		<!--jquery 引入的CDN -->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		
		 <!--解决ios延迟问题 -->
		<script src="./js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">$(function() {FastClick.attach(document.body);});</script>
		<!--全局管理-->
		<script src="./js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body ontouchstart onselectstart="return false" class="weui-wepay-pay-wrap" >
		<!--加载动画-->
		<div id="loading">
			<div class="spinner">
			  <div class="rect1"></div>
			  <div class="rect2"></div>
			  <div class="rect3"></div>
			  <div class="rect4"></div>
			  <div class="rect5"></div>
			</div>
			<div >
				正在努力的加载中……
			</div>
		</div>
		
		<!--信息-->
		<!--<div class="shop-logo">
			<img id="shopPic" height="100%" width="100%" src="img/logo.png" alt="商户门店照片加载失败！" style="text-align: center;" />
		</div>-->
		
		<div class="pay-info">
			<div class="shop-name">
				<div id="shopPic" class="icon icon-logo"></div>
				<div class="shop-name-label" id="shopName" > 开店管家  </div>
			</div>
			<div class="pay-amount">
				<div class="pay-input">
					<span id="paymoney"></span>
					<span class="pay-input-label">￥</span>	
				</div>
				<div class="group-img">
					<img height="100%" src="./img/group.png"/>
				</div>
				
			</div>
			<!-- <div class="pay-submit-btn pay-submit">立即支付</div> -->
		</div>
		
		
		
		<!--数字模拟键盘-->
		<div class="keys-box">
			<table id="virtual-keys" cellspacing="0" cellpadding="0">
				<tr>
					<td class="paynum">1</td>
					<td class="paynum">2</td>
					<td class="paynum">3</td>
					<td id="pay-return">
						<div class="keybord-return"></div>
					</td>
				</tr>
				<tr>
					<td class="paynum">4</td>
					<td class="paynum">5</td>
					<td class="paynum">6</td>
					<td rowspan="3" class="pay">
						<a id="pay-submit" class="pay-submit" data-auth = "off">
							<div class="a-pay">
								<p>确认</p>
								<p>支付</p>
							</div>
						</a>
					</td>
				</tr>
				<tr>
					<td class="paynum">7</td>
					<td class="paynum">8</td>
					<td class="paynum">9</td>
				</tr>
				<tr>
					<td id="pay-zero" colspan="2" class="payzero">0</td>
					<td id="pay-float">.</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
	
			// 自适应字体大小
			(function () {
				var designW = 750;  //设计稿宽
				var font_rate = 100;
				//适配
				document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
				document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
		
				//监测窗口大小变化
				window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
					document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
					document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
				}, false);
			})();		
	</script>
	 <!--
	 
		金额： amount
		台码： platformCode
		方式： channel   alipay wechat
	 -->
	<script type="text/javascript">
		$("#loading").show();
		let $paymoney = $('#paymoney');
		let isWeChat = navigator.userAgent.indexOf('MicroMessenger') !== -1;
		let isAlipay = navigator.userAgent.indexOf('AlipayClient') !== -1;	
		let baseUrl = window.baseUrl;	
		let flag = false;
		getShopInfo(); // 获取信息 验证商户是否可以发起支付
		
		$(".paynum").each(function(){
			$(this).click(function(){
				// 
				$paymoney.removeClass('placeholder');
				if(($paymoney.text()).indexOf(".") !== -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
					return;
				}	
				
				if($.trim($paymoney.text()) == "0"){
					return;
				}
				if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
					return;
				}
				$('.pay-submit').removeClass('pay-disabled');
				$('#pay-submit').data('auth','on');
				$paymoney.text($paymoney.text() + $(this).text());
				
			});
		});
		
		$("#pay-return").click(function(){
			$paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1));
			if (!$paymoney.text()) {
				$('#pay-submit').data('auth','off');
				$('.pay-submit').addClass('pay-disabled');
				$paymoney.addClass('placeholder');
			}
		});
		
		$("#pay-zero").click(function(){
			$paymoney.removeClass('placeholder');
			if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
				return;
			}
			if($.trim($paymoney.text()) == "0"){
				return;
			}
			if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
				return;
			}
			$paymoney.text($paymoney.text() + $(this).text());
		});
		
		$("#pay-float").click(function(){
			$paymoney.removeClass('placeholder');
			if($.trim($paymoney.text()) == ""){
				$paymoney.text('0.');
				return;
			}
		
			if(($paymoney.text()).indexOf(".") != -1){
				return;
			}
			
			if(($paymoney.text()).indexOf(".") != -1){
				return;
			}		
			$paymoney.text($paymoney.text() + $(this).text());
		});
		
		$('.pay-submit').click(function(){
			
			if($('#pay-submit').data('auth') === 'on'){
				
				if(!flag){
					alert("商户验证失败！请重新尝试！");
					return;
				} // 验证是否可以发起支付
				
				// 金额： amount 台码： platformCode 方式： channel   alipay wechat
				let amount = $paymoney.text();
				let platformCode = getQueryString('platformCode');
		
//				let amount = "0.1";
//				let platformCode = "123456789";
				
				if(amount == null || amount == ''){
					alert("请输入金额！");
					return;
				}
				if(platformCode == undefined || platformCode == null || platformCode == ''){
					alert("无法获取台码id，请重新尝试！");
					return;
				}

				if(isAlipay){
					// handleAlipay(amount,platformCode,'alipay');
					handleKuaiYin(amount,platformCode,'ALIPAY');
					return;
				}
				if(isWeChat){
					// handleWechat(amount,platformCode,'wechat');
					handleKuaiYin(amount,platformCode,'WECHAT');
					return;
				}
				
				alert("请使用微信扫一扫或者支付宝扫一扫进行付款！");
				
			}
		})
		
		if ($paymoney.text()==='' || $paymoney.text()===null) {
			$('#pay-submit').data('auth','off');
			$('.pay-submit').addClass('pay-disabled');
			$paymoney.addClass('placeholder');
		}
		
		// 获取商户信息 
		function getShopInfo(){
			let platformCode = getQueryString('platformCode');
			let channel = isWeChat?'wechat':isAlipay?'alipay':'';
			let url = baseUrl + "user/Platform/getMerchantHeadPicByplatFormCode?platformCode="+platformCode+"&channel="+channel;
			$.ajax({
				url,
				type:"get",
				async:false,
				error:function(err){
					// 失败
					$("#loading").hide();
					alert("获取商户信息失败！");	
				},
				success:function(res){
					// TODO 成功 去显示商户的图片和名称 
					$("#loading").hide();
					if(res.resp_code === "000000"){
						flag = true;
						handleShopInfo(res.result);
					}else{
						alert(res.resp_message);
//						alert(JSON.stringify(res));
					}
				}
			});
		}
		
		// 处理商户显示
		function handleShopInfo(data){
//			alert(JSON.stringify(data));			
			data.shopHeadPic && $('#shopPic').css('background-image',`url(${data.shopHeadPic})`);	
			data.shopName && $('#shopName').html(data.shopName);
		}
		
		// 获取url参数
		function getQueryString(name) {
		    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		    var r = window.location.search.substr(1).match(reg);
		    if (r != null) return unescape(r[2]); return null;
		}
		
		// 处理阿里支付
		function handleAlipay(amount,platformCode,channel){
//			alert(amount+"==="+platformCode+channel)
			$.ajax({
				type:"post",
				url:baseUrl + "paymentchannel/order/create",
				async:true,
				data:{
					amount,
					platformCode,
					channel
				},
				success:function(res){
//					alert(JSON.stringify(res.result));
					if(res.resp_code === "000000"){
						if(res.result===null){
							alert("无法生成支付宝订单！");
							return;
						}
						window.location.href = res.result;
					}else{
						alert(res.resp_message);
					}
					
				},
				error:function(err){
					alert("支付宝发起支付失败！");
				}
			});
							
		}
		
		// 处理微信支付
		function handleWechat(amount,platformCode,channel){
			// 获取code的跳转地址
			$.ajax({
				url:baseUrl + "paymentchannel/wechat/redirect",
				type:"post",
				data:{
					amount,
					platformCode,
					channel
				},
				error:function(err){
					// 失败
					alert("获取订单失败！请重新尝试！");
				},
				success:function(res){
					// 成功
//					console.log(res)
//					alert(JSON.stringify(res));
					if(res.result===null){
						alert("无法生成微信订单！");
						return;
					}
					window.location.href = res.result;			
				}
			});
			
		}
		
		// 快银 
		function handleKuaiYin(amount,platformCode,channel){
			$.ajax({
				url:baseUrl + "paymentchannel/pay_order/add/payment",
				type:"post",
				data:{
					totalAmount:amount,
					platformCode,
					orderType:channel
				},
				error:function(err){
					// 失败
					alert("获取订单失败！请重新尝试！");
				},
				success:function(res){
					// 成功
//					console.log(res)
//					alert(JSON.stringify(res));
					if(res.result===null){
						alert("无法生成订单！");
						return;
					}
					try{
						window.location.href = getHrefFromStr(res.result);	
					}catch(err){
						alert('发起支付失败');
					}
							
				}
			});
		}
		
		// 获取字符串中的a标签的href的值
		function getHrefFromStr(str){
			let reg =  /(http[s]?:\/\/([\w-]+.)+([:\d+])?(\/[\w-\.\/\?%&=]*)?)/gi;
			return str.toString().match(reg)[0].replace(/\"/g,"");
		}

	</script>
	
</html>
